<template>
	<view class="content">
		<!-- 调用轮播分页器的样式组件 -->
		<uni-swiper-dot :info="list" mode="round" :dots-styles="{ backgroundColor:'rgba(0,0,0,0.5)',selectedBackgroundColor:'#ffffff', selectedBorder:'#fff' }" :current="current">
			<swiper class="swiperContainer" autoplay  @change="changeBanner">
				<swiper-item v-for="item in list" :key="item">
					<image class="img" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<!-- 选项卡商品区域 -->
		<view class="tabs">
			<u-sticky bgColor="#fff">
			    <u-tabs :list="tabsList" 
					lineColor="#d81e06" 
					:activeStyle="{ color:'#d81e06' }" 
					:inactiveStyle="{ color:'black' }"
					itemStyle="height:44px ; width:25%;"
					@change="getGoods"
					:current='currentIndex'
				></u-tabs>
			</u-sticky>
			<!-- 调用子组件 -->
			<good-list :list='goods'></good-list>
		</view>
	</view>
</template>

<script>
// 引入请求文件
import { apiBanner , apiIndexTabs , apiGoods } from '../../api/mock'
export default {
	data() {
		return {
			list : [],		// 轮播图片地址
			current : 0,
			tabsList : [],	//选项卡名称
			currentIndex : 0,
			goods : [],
			p : 1,		//当前页码
			num : 6,	//每页条数
		}
	},
	onLoad() {
		uni.showLoading({
			title:'响应中...',
			mask:true,
		})
		// 当页面加载完成后，请求各类数据
		this.getBanner();
		this.getIndexTabs();
		// bug：由于请求返回需要1秒，为了顺利获取数据设置定时器2秒后再执行该函数
		setTimeout( ()=>{
			this.getGoods({index:0});
		},1100 )
	},
	// 触底——添加商品的下一页数据
	onReachBottom(){
		this.p++;		//每次触底页码自增
		// 根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
		let tabname = this.currentIndex == 0 ? '全部' : this.tabsList[this.currentIndex].name;
		// 获取触底后的页码对应的数据
		apiGoods( this.p , this.num , tabname ).then( (res)=>{
			console.log(res);
			// 保留原数据，添加新数据
			
		} ).catch( (err)=>{ console.log(err); } )
		
	},
	// 下拉重置整个页面：重置data函数初始化；页面数据重新发起请求
	onPullDownRefresh() {
		setTimeout( ()=>{
			// 关闭下拉
			uni.stopPullDownRefresh();
			this.currentIndex = 0;
			this.p = 1;
			this.getBanner();
			this.getIndexTabs();
			this.getGoods({index:0});
			// 提示弹窗
			uni.showToast({ icon:'none',title:'刷新成功' })
		} , 1000 )
	},
	methods: {
		// 轮播的改变事件【通过改变事件有其他的操作】
		changeBanner(e){
			this.current = e.detail.current;
		},
		// 调用请求轮播数据的函数
		getBanner(){
			// 调用请求
			apiBanner( 'desc' ).then( (res)=>{
				uni.hideLoading();
				this.list = res;
			} ).catch( (err)=>{
				console.log(err);
			} )
		},
		// 调用请求选项卡标题的函数
		getIndexTabs(){
			apiIndexTabs().then( (res)=>{
				this.tabsList = res;
			} ).catch( (err)=>{
				console.log(err);
			} )
		},
		// 选项卡的改变事件:永远只拿第一页的数据
		getGoods(e){
			this.currentIndex = e.index;
			let tabname = this.tabsList[e.index].name;
			this.p = 1;
			this.goods = [];
			apiGoods(this.p , this.num , tabname).then( (res)=>{
				this.goods = [...res];
			} ).catch( (err)=>{
				console.log(err);
			} )
		}
	}
}
</script>

<style lang="scss">
.content{
	width: 100%;
}
.swiperContainer .img{
	width: 100%;
}
.tabs{
	width: 100%;
}
</style>
